<template>
    <el-tabs
        v-model="queryList.accountType"
        type="card"
        class="demo-tabs"
        @tab-change="handleClick"
    >
        <el-tab-pane label="采购单位" :name="1"></el-tab-pane>
        <el-tab-pane label="门店" :name="2"></el-tab-pane>
        <el-tab-pane label="供应商" :name="3"></el-tab-pane>
        <el-tab-pane label="分销商" :name="4"></el-tab-pane>
    </el-tabs>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!addState"
                    @click="opAdd"
                >新增</el-button>
                <el-button
                    type="info"
                    plain
                    icon="el-icon-delete"
                    :disabled="!deleteState"
                    @click="opBatchDelete"
                >删除</el-button>
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    :disabled="!deleteState"
                    @click="openOrgs"
                >绑定机构</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>

        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="账号" label-width="100px">
                        <el-input
                            placeholder="---请输入账号---"
                            v-model="queryList.accountCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="姓名" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.realName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="手机号" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.mobile"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item
                        label-width="120px"
                        label="门店"
                        prop="pId"
                        v-show="queryList.accountType==2"
                    >
                        <sc-store-select
                            ref="orgselect"
                            :props="storeProps"
                            :selectKeyValue="'storeId'"
                            :multiple="false"
                            v-model="queryList.store"
                            style="width: 300px"
                            @fatherMethod="storeSelectProcess"
                        ></sc-store-select>
                    </el-form-item>

                    <el-form-item
                        label-width="120px"
                        label="供应商"
                        prop="pId"
                        v-show="queryList.accountType==3"
                    >
                        <sc-supplier-select
                            ref="orgselect"
                            :props="supplierProps"
                            :selectKeyValue="'supplierId'"
                            :multiple="false"
                            v-model="queryList.supplier"
                            style="width: 300px"
                            @fatherMethod="supplierSelectProcess"
                        ></sc-supplier-select>
                    </el-form-item>

                    <el-form-item
                        label-width="120px"
                        label="采购单位"
                        prop="pId"
                        v-show="queryList.accountType==1"
                    >
                        <el-select
                            placeholder="---请选择供货单位---"
                            v-model="queryList.pId"
                            style="width: 300px"
                        >
                            <el-option
                                v-for="item in optionsPurchaseUnity"
                                :key="item.purchaseUnityId"
                                :label="item.purchaseUnityName"
                                :value="item.purchaseUnityId"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.status"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsState"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>
        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'account/pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                row-key="accountId"
                key="accountId"
                stripe
                show-summary
                remoteSummary
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="账号" prop="accountCode" min-width="180" sortable></el-table-column>
                <el-table-column label="姓名" prop="realName" min-width="180" sortable></el-table-column>
                <el-table-column label="手机号" prop="mobile" min-width="180" sortable></el-table-column>
                <el-table-column label="账号类型" prop="accountTypeDesc" min-width="180" sortable></el-table-column>
                <el-table-column label="所属机构" prop="orgName" min-width="280" sortable></el-table-column>
                <el-table-column label="状态" fixed="right" align="center" min-width="120" sortable>
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            :active-value="1"
                            :inactive-value="0"
                            @change="setStatus(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="280">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            >查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                :disabled="!editState"
                                @click="opEdit(scope.row, scope.$index)"
                            >编辑</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                :disabled="!editState"
                                @click="opEditPassword(scope.row, scope.$index)"
                            >修改密码</el-button>
                            <el-popconfirm
                                title="确定删除吗？"
                                @confirm="opDelete(scope.row, scope.$index)"
                            >
                                <template #reference>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        :disabled="!deleteState"
                                    >删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>

    <password-dialog
        v-if="dialogPassword"
        ref="passwordDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogPassword = false"
    ></password-dialog>

    <orgs-dialog v-if="dialogOrgs" ref="orgsDialog" @fatherMethod="opBindData" @success="handleSaveSuccess"
        @closed="dialogOrgs = false"></orgs-dialog>
</template>

<script>
import saveDialog from "./save";
import passwordDialog from "./password";
import orgsDialog from "./orgs";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "account",
    components: {
        saveDialog,
        passwordDialog,
        orgsDialog,
        publicjs,
    },
    data() {
        return {
            dialogSave: false,
            dialogPassword: false,
            showCondition: false,
            dialogOrgs:false,
            selectionRows: [],
            pkList: ["accountId"],
            columnList: [],
            OrderList: { accountId: "Asc" },
            queryList: {
                accountType: 1,
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            storeProps: {
                label: "storeName",
                value: "storeId",
            },
            supplierProps: {
                label: "supplierName",
                value: "supplierId",
            },
            orgCodeList: "",
            orgNameList: "",
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsState: [],
            optionsPurchaseUnity: [],
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add").setData({
                    accountCode: "",
                    password: " ",
                    pId: null,
                    mobile: "",
                    realName: "",
                    accountType: this.queryList.accountType,
                    status: 1,
                    isAdmin:0
                });
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Edit").setData(row);
            });
        },
        //查看
        opShow(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Show").setData(row);
            });
        },
        //修改密码
        opEditPassword(row){
            this.dialogPassword = true;
            this.$nextTick(() => {
                this.$refs.passwordDialog.open("Edit").setData(row);
            });
        },
        //设置状态
        async setStatus(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    row.status == 0 ? "account/disabled" : "account/enable",
                    { accountIds: [row.accountId] }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //删除
        async opDelete(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "account/delete",
                    { accountIds: [row.accountId] }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //批量删除
        async opBatchDelete() {
            // eslint-disable-next-line no-debugger
            //debugger;
            this.$confirm(
                `确定删除选中的 ${this.selectionRows.length} 项吗？`,
                "提示",
                {
                    type: "warning",
                }
            )
                .then(async () => {
                    const accountIds = this.selectionRows.map(
                        (p) => p.accountId
                    );
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "account/delete",
                                { accountIds: [...accountIds] }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$refs.mytable.getData();
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                        }
                    } catch (error) {
                        this.loading = false;
                        return false;
                    }
                })
                .catch(() => {});
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        //绑定机构
        openOrgs() {
            if (this.selectionRows.length == 0) {
                this.$message.error("请选择要设置的账号");
                return;
            }

            if (this.selectionRows.length > 1) {
                this.$message.error("请选择一个账号");
                return;
            }

            this.dialogOrgs = true;
            this.$nextTick(() => {
                this.$refs.orgsDialog.setData(this.selectionRows[0]);
                this.$refs.orgsDialog.open("Edit");
            });
        },
        async handleClick(tab) {
            this.queryList = { accountType: tab };
            await this.$nextTick();
            await this.opBindData();
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = { accountType: this.queryList.accountType };
        },
        async storeSelectProcess(val) {
            this.queryList.pId = val.storeId;
        },
        async supplierSelectProcess(val) {
            this.queryList.pId = val.supplierId;
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status"] }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
            try {
                //采购单位列表
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "purchase-unity/list"
                );
                if (returnValue.status == 200) {
                    this.optionsPurchaseUnity = returnValue.response;
                    // this.queryList.pId =
                    //     this.optionsPurchaseUnity[0].purchaseUnityId;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
